<template>
  <div>
      <ul class="cont-top-r">
        <li class="list-item" v-for="item in messageList" :key="item.mBh">
            <div class="list-item-title">【{{['','报名申请','报名审批','报销申请','报销审批','工资审批','报名作废','学时作废','检车预警','保险预警',''][item.messageType]}}】</div>
            <div class="list-item-cont">{{item.content}}</div>
            <div class="list-item-time">{{$moment(item.createDate).format('YYYY/M/D')}}</div>
        </li>
      </ul>
      <el-col :span="24" class="my-pagination">
        <el-pagination background layout="total, prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
  </div>
</template>

<script>
export default {
  name: "moreMsg",
  data() {
    return {
      total: 1,
      currentPage: 1,
      pageSize: 10,
      messageList: []
    };
  },
  mounted: function() {
    //   获取消息列表
    this.loadData();
  },
  methods: {
    //   获取消息列表
    loadData() {
      let that = this;
      this.$http.post(
        "iem/message",
        {
          currentPage: that.currentPage,
          pageSize: that.pageSize,
          _method: "PATCH"
        },
        d => {
          if (d.status == "1") {
            that.messageList = d.rows;
            that.total = d.total;
          } else {
            that.messageList = [];
            that.total = 0;
          }
        }
      );
    },
    //   切页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    }
  }
};
</script>

<style scoped>
.cont-top-r {
  width: 100%;
  height: 486px;
  padding: 8px 0;
  border-radius: 3px;
  background: #fff;
  text-align: center;
  overflow-y: auto;
  border-bottom: 1px solid #e1e1e1;
}
.list-item {
  width: 98%;
  float: left;
  padding: 21px 1%;
  line-height: 24px;
  text-align: left;
  display: flex;
}
.list-item div {
  font-size: 16px;
}
.list-item-title {
  color: #ff6017;
  flex: 0 0 100px;
  align-self: flex-start;
}
.list-item-cont {
  color: #6b6b6b;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.list-item-time {
  color: #adadad;
  flex: 0 0 90px;
  align-self: flex-end;
  text-align: right;
}
</style>


